﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<title>豪德天沐</title>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/animate.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<link rel="stylesheet" type="text/css" href="css/media.css"/>
<style>
* { margin: 0; padding: 0;}
a{
	text-decoration: none !important;
}
body { font: 16px/1.8 "Microsoft Yahei",verdana;
overflow: hidden;}
/*loading style*/
@-webkit-keyframes rotate-animation {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes rotate-animation {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@-webkit-keyframes move-animation {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	25% {
		-webkit-transform: translate(-64px, 0);
		transform: translate(-64px, 0);
	}
	75% {
		-webkit-transform: translate(32px, 0);
		transform: translate(32px, 0);
	}
	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}
@-webkit-keyframes move-animation {
 0%{
	 -webkit-transform: translate(0,0);
	 transform: translate(0,0);
 }
 }
@keyframes move-animation {
	0% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
	25% {
		-webkit-transform: translate(-64px, 0);
		transform: translate(-64px, 0);
	}
	75% {
		-webkit-transform: translate(32px, 0);
		transform: translate(32px, 0);
	}
	100% {
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
	}
}
.page{
	width: 100%;
	height: 1080px;
	/*background: #dcdcdc;*/
	background: url(AA.jpg) no-repeat;
	background-size: 100% 100%;
	position: relative;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.page-hello{
	font-size: 40px;
	color: #fff;
	position: relative;
	top: -20%;
}
.page-hello-ms{
	font-size: 18px;
	font-weight: normal;
	text-align: center;
	line-height: 40px;
	text-transform: uppercase;
}
.circle-loader {
	display: block;
	width: 64px;
	height: 64px;
	margin-left: -32px;
	margin-top: -32px;
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform-origin: 16px 16px;
	transform-origin: 16px 16px;
	-webkit-animation: rotate-animation 5s infinite;
	animation: rotate-animation 5s infinite;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
}
.circle-loader .circle {
	-webkit-animation: move-animation 2.5s infinite;
	animation: move-animation 2.5s infinite;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	position: absolute;
	left: 50%;
	top: 50%;
}
.circle-loader .circle-line {
	width: 64px;
	height: 24px;
	position: absolute;
	top: 4px;
	left: 0;
	-webkit-transform-origin: 4px 4px;
	transform-origin: 4px 4px;
}
.circle-loader .circle-line:nth-child(0) {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}
.circle-loader .circle-line:nth-child(1) {
	-webkit-transform: rotate(90deg);
	transform: rotate(90deg);
}
.circle-loader .circle-line:nth-child(2) {
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}
.circle-loader .circle-line:nth-child(3) {
	-webkit-transform: rotate(270deg);
	transform: rotate(270deg);
}
.circle-loader .circle-line .circle:nth-child(1) {
	width: 8px;
	height: 8px;
	top: 50%;
	left: 50%;
	margin-top: -4px;
	margin-left: -4px;
	border-radius: 4px;
	-webkit-animation-delay: -0.3s;
	animation-delay: -0.3s;
}
.circle-loader .circle-line .circle:nth-child(2) {
	width: 16px;
	height: 16px;
	top: 50%;
	left: 50%;
	margin-top: -8px;
	margin-left: -8px;
	border-radius: 8px;
	-webkit-animation-delay: -0.6s;
	animation-delay: -0.6s;
}
.circle-loader .circle-line .circle:nth-child(3) {
	width: 24px;
	height: 24px;
	top: 50%;
	left: 50%;
	margin-top: -12px;
	margin-left: -12px;
	border-radius: 12px;
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}
.circle-loader .circle-blue {
	background-color: #1f4e5a;
}
.circle-loader .circle-red {
	background-color: #ff5955;
}
.circle-loader .circle-yellow {
	background-color: #ffb265;
}
.circle-loader .circle-green {
	background-color: #00a691;
}
/*loading style*/
</style>
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/My_animate.js"></script>
<script>
$(function(){
	$(".index-nav").addClass("on");
	$(".index-logo").addClass("on");
	$(".index-tell").addClass("on");
	$(".index-head").addClass("on");
	$("#menu .active a").css("color","#00dfb9");
	if($.browser.msie && $.browser.version < 10){
		$('body').addClass('ltie10');
	}
	$('#dowebok').fullpage({
		anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7', 'page8'],
		menu: '#menu',
		scrollingSpeed: 1000,
		verticalCentered: false,
		navigation: false,
		afterLoad: function(anchorLink, index){
			if(index == 1){
				$(".index-nav").removeClass("on");
				$(".index-logo").removeClass("on");
				$(".index-tell").removeClass("on");
				$(".index-head").removeClass("on");
				$("#menu .active a").css("color","#00dfb9");
			}
			if(index == 2){
				$("#menu .active a").css("color","#00dfb9");
			}
			if(index == 3){
				$("#menu .active a").css("color","#00dfb9");
			}
			if(index == 4){
				$("#menu .active a").css("color","#00dfb9");
			}
			if(index == 5){
				$("#menu .active a").css("color","#00dfb9");
			}
			if(index == 6){
				$("#menu .active a").css("color","#00dfb9");
			}
		},
		onLeave: function(index,nextIndex,direction){
			if(nextIndex == 2){
				$(".index-nav-line").css("left","82px");
				$(".index-nav").mouseleave(function(){
					$(".index-nav-line").css("left","82px");
				})
				$(".index-nav").addClass("on");
				$(".index-logo").addClass("on");
				$(".index-tell").addClass("on");
				$(".index-head").addClass("on");
				$("#menu a").css("color","#ccc");
			}
			if(nextIndex == 1){
				$(".index-nav-line").css("left","11px");
				$(".index-nav").mouseleave(function(){
					$(".index-nav-line").css("left","11px");
				})
				$(".index-nav").removeClass("on");
				$(".index-logo").removeClass("on");
				$(".index-tell").removeClass("on");
				$(".index-head").removeClass("on");
				$("#menu a").css("color","#ccc");
			}
			if(nextIndex == 3){
				$(".index-nav-line").css("left","150px");
				$(".index-nav").mouseleave(function(){
					$(".index-nav-line").css("left","150px");
				})
				$(".index-nav").addClass("on");
				$(".index-logo").addClass("on");
				$(".index-tell").addClass("on");
				$(".index-head").addClass("on");
				$("#menu a").css("color","#ccc");
				$("#menu a").css("color","#ccc");
			}
			if(nextIndex == 4){
				$(".index-nav-line").css("left","218px");
				$(".index-nav").mouseleave(function(){
					$(".index-nav-line").css("left","218px");
				})
				$(".index-nav").addClass("on");
				$(".index-logo").addClass("on");
				$(".index-tell").addClass("on");
				$(".index-head").addClass("on");
				$("#menu a").css("color","#ccc");
				$(".index-nav").addClass("on");
				$(".index-logo").addClass("on");
				$(".index-tell").addClass("on");
				$(".index-head").addClass("on");
				$("#menu a").css("color","#ccc");
				$("#menu a").css("color","#ccc");
			}
			if(nextIndex == 5){
				$(".index-nav-line").css("left","286px");
				$(".index-nav").mouseleave(function(){
					$(".index-nav-line").css("left","286px");
				})
				$(".index-nav").addClass("on");
				$(".index-logo").addClass("on");
				$(".index-tell").addClass("on");
				$(".index-head").addClass("on");
				$("#menu a").css("color","#ccc");
				$("#menu a").css("color","#ccc");
			}
			if(nextIndex == 6){
				$(".index-nav-line").css("left","356px");
				$(".index-nav").mouseleave(function(){
					$(".index-nav-line").css("left","356px");
				})
				$(".index-nav").addClass("on");
				$(".index-logo").addClass("on");
				$(".index-tell").addClass("on");
				$(".index-head").addClass("on");
				$("#menu a").css("color","#ccc");
				$("#menu a").css("color","#ccc");
			}
		},
	});
});
</script>
</head>
<body>
<!--加载时显示-->
<div class="page">
	<img src="AA.jpg" width="100%" height="100%" style="position: absolute; bottom: 0; left: 0;">
	<div class="page-hello"><p>豪德天沐欢迎你</p><p class="page-hello-ms">holdtime welcomes you</p></div>
	<div class="circle-loader">
		<div class="circle-line">
			<div class="circle circle-blue"></div>
			<div class="circle circle-blue"></div>
			<div class="circle circle-blue"></div>
		</div>
		<div class="circle-line">
			<div class="circle circle-yellow"></div>
			<div class="circle circle-yellow"></div>
			<div class="circle circle-yellow"></div>
		</div>
		<div class="circle-line">
			<div class="circle circle-red"></div>
			<div class="circle circle-red"></div>
			<div class="circle circle-red"></div>
		</div>
		<div class="circle-line">
			<div class="circle circle-green"></div>
			<div class="circle circle-green"></div>
			<div class="circle circle-green"></div>
		</div>
	</div>
</div>
<!--head-->
<div class="index-head">
	<div class="index-logo"><img src="images/logo.png" width="100%"></div>
	<a></a>
	<div class="index-nav">
		<ul id="menu">
			<li data-menuanchor="page1" class="index-nav-item shouye active">
				<a href="#page1">首 页 </a>
			</li>
			<li data-menuanchor="page2" class="index-nav-item chanpin">
				<a href="#page2">产品</a>
			</li>
			<li data-menuanchor="page3" class="index-nav-item fangan">
				<a href="#page3">方案</a>
			</li>
			<li data-menuanchor="page4" class="index-nav-item tuandui">
				<a href="#page4">团队</a>
			</li>
			<li data-menuanchor="page5" class="index-nav-item guanyu">
				<a href="#page5">关于</a>
			</li>
			<li data-menuanchor="page6" class="index-nav-item lianxi">
				<a href="#page6">联系</a>
			</li>
		</ul>
		<i class="index-nav-line"></i>
	</div>
	<div class="index-tell">400-6789-820</div>
</div>
<!--head end-->
<div id="dowebok">
	<div class="section section1">
		<div class="swiper-container swiper-container-index">
	        <div class="swiper-wrapper">
	            <div class="swiper-slide index-slide1-imgbg">
	            	<div class="index-slide1-cont">
	            		<div class="index-logo2 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.5s" swiper-animate-delay="0s"><img src="images/index-content-logo.png" width="100%"></div>
	            		<p class="index-slide1-cont-p ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0s">全国服务热线</p>
	            		<img class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay=".1s" src="images/hot-line.png" width="100%" />
	            	</div>
	            </div>
	            <div class="swiper-slide index-slide2-imgbg">
	            	<div class="index-slide2-cont">
	            		<img class="index-slide2-logo ani" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0s" src="images/logo2.png"/>
	            		<div class="index-slide2-cont-t">
	            			<ul> 
								<li class="index-slide2-cont-item ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay="0s">
									<span class="index-cont-img"><img src="images/index-img1.jpg" width="100%"></span>
									<p class="index-content-cont-ms">关于豪德天沐</p>
								</li>
								<li class="index-slide2-cont-item ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay=".1s">
									<span class="index-cont-img"><img src="images/index-img2.jpg" width="100%"></span>
									<p class="index-content-cont-ms">专注互联网+道路运输</p>
	
								<li class="index-slide2-cont-item ani" swiper-animate-effect="fadeInRight" swiper-animate-duration="0.5s" swiper-animate-delay=".2s">
									<span class="index-cont-img"><img src="images/index-img3.jpg" width="100%"></span>
									<p class="index-content-cont-ms">产品体系</p>
								</li>
							</ul>
	            		</div>
	            	</div>
	            </div>
	            <div class="swiper-slide index-slide3-imgbg">
	            	<div class="index-slide3-cont">
	            		<img class="index-slide3-head ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="0s" src="images/slide3-head.png" width="100%">
	            		<div class="index-slide3-art">
	            			<ul>
	            				<li class="index-slide3-art-item ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="0s" src="images/slide3-head.png" width="100%">
	            					<i class="index-slide3-img"><img src="images/slide3-img1.png" width="100%"></i>
	            					<p class="index-slide3-text">WINDOWS 平台</p>
	            				</li>
	            				<li class="index-slide3-art-item ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay=".1s" src="images/slide3-head.png" width="100%">
	            					<i class="index-slide3-img"><img src="images/slide3-img2.png" width="100%"></i>
	            					<p class="index-slide3-text">Android 平台</p>
	            				</li>
	            				<li class="index-slide3-art-item ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay=".2s" src="images/slide3-head.png" width="100%">
	            					<i class="index-slide3-img"><img src="images/slide3-img3.png" width="100%"></i>
	            					<p class="index-slide3-text">APPLE 平台</p>
	            				</li>
	            			</ul>
	            		</div>
	            	</div>
	            </div>
	            <div class="swiper-slide index-slide4-imgbg">
	            	<i class="index-slide4-right-shadow"></i>
	            	<i class="index-slide4-left-shadow"></i>
	        		<div class="index-slide4-left ani" swiper-animate-effect="slideInLeft" swiper-animate-duration="1s" swiper-animate-delay="0s" src="images/slide3-head.png" width="100%">
	            		<img class="index-slide4-left-img" src="images/slide4-head.png">
	            	</div>
	            	<div class="index-slide4-right">
	            		<ul>
	            			<li class="index-slide4-right-item ani" swiper-animate-effect="slideInRight" swiper-animate-duration="1s" swiper-animate-delay="0s" src="images/slide3-head.png" width="100%">
	            				<i class="index-slide4-right-icon ani"><img src="images/slide4-icon1.png" width="100%"></i>
	            				<p class="index-slide4-right-title">J2EE架构<br /><span class="index-slide4-right-text">应用最新技术，企业级架构，搭载最新平台</span></p>
	            			</li>
	            			<li class="index-slide4-right-item ani" swiper-animate-effect="slideInRight" swiper-animate-duration="1s" swiper-animate-delay="0s" src="images/slide3-head.png" width="100%">
	            				<i class="index-slide4-right-icon"><img src="images/slide4-icon2.png" width="100%"></i>
	            				<p class="index-slide4-right-title">企业级管理平台<br /><span class="index-slide4-right-text">应用最新技术，企业级架构，搭载最新平台</span></p>
	            			</li>
	            			<li class="index-slide4-right-item ani" swiper-animate-effect="slideInRight" swiper-animate-duration="1s" swiper-animate-delay="0s" src="images/slide3-head.png" width="100%">
	            				<i class="index-slide4-right-icon"><img src="images/slide4-icon3.png" width="100%"></i>
	            				<p class="index-slide4-right-title">大数据云计算<br /><span class="index-slide4-right-text">应用最新技术，企业级架构，搭载最新平台</span></p>
	            			</li>
	            		</ul>
	            	</div>
	            </div>
	        </div>
	        <!-- Add Pagination -->
	        <div class="swiper-pagination swiper-pagination-index" style="bottom: 80px;"></div>
	    </div>
	    <!--foot-->
		<div class="index-foot">内蒙古豪德天沐科技有限公司 荣誉出品</div>
		<!--foot end-->
	</div>
	
	<div class="section section2">
		<div class="bg"><img data-src="images/section6.jpg" alt=""></div>
		<div class="bg21"></div>
		<div class="bg22"></div>
		<div class="bg23" style="margin-left: -500px;">
			<div class="swiper-container swiper-container-v">
		        <div class="swiper-wrapper" style="height: 240px;">
		            <div class="swiper-slide products-cont">
		            	<a href="http://xiaoluxueche.com/xlgj/web/index" target="_blank">
			            	<i class="products-cont-topBg"><img src="images/jia-icon.png"></i>
			            	<span class="products-cont-bottomBg">
			            		<p class="products-tab-cont-swiper-title">小鹿学车</p>
			            		<p class="products-tab-cont-swiper-ms">智能化学车生态系统，您最佳的学车小伙伴。</p>
			            	</span>
			            </a>
		            	<span class="products-img"><img data-src="images/product-img1.jpg" width="100%" /></span>
		            	<p class="products-tab-cont-swiper-title">小鹿学车</p>
		            	<p class="products-tab-cont-swiper-ms">智能化学车生态系统，您最佳的学车小伙伴。</p>
		            </div>
		            <div class="swiper-slide products-cont">
		            	<a href="chanpin2.html" target="_blank">
			            	<i class="products-cont-topBg"><img src="images/jia-icon.png"></i>
			            	<span class="products-cont-bottomBg">
			            		<p class="products-tab-cont-swiper-title">呼叫中心</p>
			            		<p class="products-tab-cont-swiper-ms">智能化呼叫系统，一站式全媒体立体化服务服务。</p>
			            	</span>
		            	</a>
		            	<span class="products-img"><img data-src="images/product-img2.jpg" width="100%" /></span>
		            	<p class="products-tab-cont-swiper-title">呼叫中心</p>
		            	<p class="products-tab-cont-swiper-ms">智能化呼叫系统，一站式全媒体立体化服务服务。</p>
		            </div>
		            <div class="swiper-slide products-cont">
		            	<a href="chanpin1.html" target="_blank">
			            	<i class="products-cont-topBg"><img src="images/jia-icon.png"></i>
			            	<span class="products-cont-bottomBg">
			            		<p class="products-tab-cont-swiper-title">智能化考试系统</p>
			            		<p class="products-tab-cont-swiper-ms">全媒体一体化，智能监控，实时记录，题库丰富。</p>
			            	</span>
		            	</a>
		            	<span class="products-img"><img data-src="images/product-img3.jpg" width="100%" /></span>
		            	<p class="products-tab-cont-swiper-title">智能化考试系统</p>
		            	<p class="products-tab-cont-swiper-ms">全媒体一体化，智能监控，实时记录，题库丰富。</p>
		            </div>
		            <div class="swiper-slide products-cont">
		            	<i class="products-cont-topBg"><img src="images/jia-icon.png"></i>
		            	<span class="products-cont-bottomBg">
		            		<p class="products-tab-cont-swiper-title">交通运输管理平台</p>
		            		<p class="products-tab-cont-swiper-ms">实时检测，方便管理。</p>
		            	</span>
		            	<span class="products-img"><img data-src="images/product-img4.jpg" width="100%" /></span>
		            	<p class="products-tab-cont-swiper-title">交通运输管理平台</p>
		            	<p class="products-tab-cont-swiper-ms">实时检测，方便管理。</p>
		            </div>
		            <div class="swiper-slide products-cont">
		            	<a href="http://xiaoluxueche.com/xlgj/web/index" target="_blank">
			            	<i class="products-cont-topBg"><img src="images/jia-icon.png"></i>
			            	<span class="products-cont-bottomBg">
			            		<p class="products-tab-cont-swiper-title">小鹿学车</p>
			            		<p class="products-tab-cont-swiper-ms">智能化学车生态系统，您最佳的学车小伙伴。</p>
			            	</span>
			            </a>
		            	<a href="http://xiaoluxueche.com/xlgj/web/index" target="_blank"><span class="products-img"><img data-src="images/product-img1.jpg" width="100%" /></span>
		            	<p class="products-tab-cont-swiper-title">小鹿学车</p>
		            	<p class="products-tab-cont-swiper-ms">智能化学车生态系统，您最佳的学车小伙伴。</p></a>
		            </div>
		            <div class="swiper-slide products-cont">
		            	<a href="chanpin2.html" target="_blank">
			            	<i class="products-cont-topBg"><img src="images/jia-icon.png"></i>
			            	<span class="products-cont-bottomBg">
			            		<p class="products-tab-cont-swiper-title">呼叫中心</p>
			            		<p class="products-tab-cont-swiper-ms">智能化呼叫系统，一站式全媒体立体化服务服务。</p>
			            	</span>
		            	</a>
		            	<span class="products-img"><img data-src="images/product-img2.jpg" width="100%" /></span>
		            	<p class="products-tab-cont-swiper-title">呼叫中心</p>
		            	<p class="products-tab-cont-swiper-ms">智能化呼叫系统，一站式全媒体立体化服务服务。</p>
		            </div>
		            <div class="swiper-slide products-cont">
		            	<a href="chanpin1.html" target="_blank">
			            	<i class="products-cont-topBg"><img src="images/jia-icon.png"></i>
			            	<span class="products-cont-bottomBg">
			            		<p class="products-tab-cont-swiper-title">智能化考试系统</p>
			            		<p class="products-tab-cont-swiper-ms">全媒体一体化，智能监控，实时记录，题库丰富。</p>
			            	</span>
		            	</a>
		            	<span class="products-img"><img data-src="images/product-img3.jpg" width="100%" /></span>
		            	<p class="products-tab-cont-swiper-title">智能化考试系统</p>
		            	<p class="products-tab-cont-swiper-ms">全媒体一体化，智能监控，实时记录，题库丰富。</p>
		            </div>
		            <div class="swiper-slide products-cont">
		            	<i class="products-cont-topBg"><img src="images/jia-icon.png"></i>
		            	<span class="products-cont-bottomBg">
		            		<p class="products-tab-cont-swiper-title">交通运输管理平台</p>
		            		<p class="products-tab-cont-swiper-ms">实时检测，方便管理。</p>
		            	</span>
		            	<span class="products-img"><img data-src="images/product-img4.jpg" width="100%" /></span>
		            	<p class="products-tab-cont-swiper-title">交通运输管理平台</p>
		            	<p class="products-tab-cont-swiper-ms">实时检测，方便管理。</p>
		            </div>
		            <div class="swiper-slide products-cont">
		            	<a href="http://xiaoluxueche.com/xlgj/web/index" target="_blank">
			            	<i class="products-cont-topBg"><img src="images/jia-icon.png"></i>
			            	<span class="products-cont-bottomBg">
			            		<p class="products-tab-cont-swiper-title">小鹿学车</p>
			            		<p class="products-tab-cont-swiper-ms">智能化学车生态系统，您最佳的学车小伙伴。</p>
			            	</span>
			            </a>
		            	<a href="http://xiaoluxueche.com/xlgj/web/index" target="_blank"><span class="products-img"><img data-src="images/product-img1.jpg" width="100%" /></span>
		            	<p class="products-tab-cont-swiper-title">小鹿学车</p>
		            	<p class="products-tab-cont-swiper-ms">智能化学车生态系统，您最佳的学车小伙伴。</p></a>
		            </div>
		        </div>
		        <div class="swiper-pagination swiper-pagination-v"></div>
		    </div>
		</div>
		<strong>[ 功能·创 ]</strong>
		<h3 style="color: #333 !important; opacity: .8;">不是非要高大上，只是醉心于设计</h3>
		<!--<p class="p1">秉承网易邮箱经典的清新简洁的设计风格，邮箱 6.0 版带来全新一代的设计理念，更追求极致唯美的视觉设计、传承更多人文和艺术底蕴，华丽蜕变，带来更舒服更爽心悦目的视觉享受。</p>-->
	</div>
	
	<div class="section section3">
		<div class="bg"><img data-src="images/section3.jpg" alt=""></div>
		<!--<div class="bg31"></div>-->
		<div class="bg23 bg08">
			<div class="servicesBox">
				<div class="serBox">
					<div class="serBoxOn"></div>
					<div class="pic1"> <img src="images/xma1.png"> </div>
					<div class="pic2"> <img src="images/xma2.png"> </div>
					<div class="txt1"> 
						<span class="tit">网站建设</span>
						<p class="tit-ms">WEB DESIGN</p>
						<p class="product-ms-p">专业的网站设计及开发服务，包括品牌网站、房产网站、集团网站、企业网站、营销型网站、视交及应用类网站等</p>
					</div>
					<div class="txt2">
						<span class="tit">网站建设</span>
						<p class="tit-ms2">WEB DESIGN</p>
						<p class="product-ms-p">专业的网站设计及开发服务，包括品牌网站、房产网站、集团网站、企业网站、营销型网站、视交及应用类网站等</p>
					</div>
				</div>
			
				<div class="serBox">
					<div class="serBoxOn"></div>
					<div class="pic1"> <img src="images/xmb1.png"> </div>
					<div class="pic2"> <img src="images/xmb2.png"> </div>
					<div class="txt1"> 
						<span class="tit">移动终端开发</span>
						<p class="tit-ms">Mobile terminal development</p>
						<p class="product-ms-p">手机网站建设，微官网建设、微信二次开发、APP应用开发、为移动设备、平板电脑、移动产品等终端提供交互流程及界面设计服务。包括IOS、Android、Win等。</p>
					</div>
					<div class="txt2">
						<span class="tit">移动终端开发</span>
						<p class="tit-ms2">Mobile terminal development</p>
						<p class="product-ms-p">手机网站建设，微官网建设、微信二次开发、APP应用开发、为移动设备、平板电脑、移动产品等终端提供交互流程及界面设计服务。包括IOS、Android、Win等。</p>
					</div>
				</div>
			
				<div class="serBox">
					<div class="serBoxOn"></div>
					<div class="pic1"> <img src="images/xmc1.png"> </div>
					<div class="pic2"> <img src="images/xmc2.png"> </div>
					<div class="txt1"> 
						<span class="tit">视觉设计</span>
						<p class="tit-ms">Visual design </p>
						<p class="product-ms-p">企业及软件的LOGO设计，企业公司的VI以及各类标识和平面传播类设计、店铺策划装修、网站专题包装设计、交互动画设计等</p>
					</div>
					<div class="txt2">
						<span class="tit">视觉设计</span>
						<p class="tit-ms2">Visual design </p>
						<p class="product-ms-p">企业及软件的LOGO设计，企业公司的VI以及各类标识和平面传播类设计、店铺策划装修、网站专题包装设计、交互动画设计等</p>
					</div>
				</div>
			
				<div class="serBox">
					<div class="serBoxOn"></div>
					<div class="pic1"> <img src="images/xmd1.png"> </div>
					<div class="pic2"> <img src="images/xmd2.png"> </div>
					<div class="txt1"> 
						<span class="tit">策划营销</span>
						<p class="tit-ms">Planning marketing</p>
						<p class="product-ms-p">
							+ 网站SEO搜索引擎优化<br />
	          				+ 网站售后增值维护推广<br />
	          				+ 网站维护托管服务<br />
	          				+ 网站后期维护运营人才培训<br />
	          				+ 微信营销/问答营销/软文发布/信誉提升 <br />
						</p>
					</div>
					<div class="txt2">
						<span class="tit">策划营销</span>
						<p class="tit-ms2">Planning marketing</p>
						<p class="product-ms-p">
							+ 网站SEO搜索引擎优化<br />
	          				+ 网站售后增值维护推广<br />
	          				+ 网站维护托管服务<br />
	          				+ 网站后期维护运营人才培训<br />
	          				+ 微信营销/问答营销/软文发布/信誉提升 <br />
						</p>
					</div>
				</div>
			</div>
		</div>
		<strong>[ 科技·聚 ]</strong>
		<h3>专注于设计体验，专业与解决方案</h3>
	</div>
	
	<div class="section section4">
		<div class="bg"><img data-src="images/section9.jpg" alt=""></div>
		<div class="bg42">
			<!--团 队-->
			<div class="about-cont tuandui">
				<div class="box">
					<div class="list">
						<ul>
							<li class="pp7 ll">
								<a href="#"><img data-src="images/team-img.png" alt="" width="100%" height="100%"/>
								<p class="mis-container-name">姓名</p>
								<p class="mis-container-p">技术总监 </p>
								<p class="mis-container-ms">在包头市稀土高新技术产业开发区软件园注册成立，公司为IT高科技私营企业。</p>
							</li>
							<li class="pp6 ll">
								<a href="#"><img data-src="images/team-img.png" alt="" width="100%" height="100%"/></a>
								<p class="mis-container-name">姓名</p>
								<p class="mis-container-p">技术总监 </p>
								<p class="mis-container-ms">在包头市稀土高新技术产业开发区软件园注册成立，公司为IT高科技私营企业。</p>
							</li>
							<li class="pp5 ll">
								<a href="#"><img data-src="images/team-img.png" alt="" width="100%" height="100%"/></a>
								<p class="mis-container-name">姓名</p>
								<p class="mis-container-p">技术总监 </p>
								<p class="mis-container-ms">在包头市稀土高新技术产业开发区软件园注册成立，公司为IT高科技私营企业。</p>
							</li>
							<li class="pp4 ll">
								<a href="#"><img data-src="images/team-img.png" alt="" width="100%" height="100%"/></a>
								<p class="mis-container-name">姓名</p>
								<p class="mis-container-p">技术总监 </p>
								<p class="mis-container-ms">在包头市稀土高新技术产业开发区软件园注册成立，公司为IT高科技私营企业。</p>
							</li>
							<li class="pp3 ll">
								<a href="#"><img data-src="images/team-img.png" alt="" width="100%" height="100%"/></a>
								<p class="mis-container-name">姓名</p>
								<p class="mis-container-p">技术总监 </p>
								<p class="mis-container-ms">在包头市稀土高新技术产业开发区软件园注册成立，公司为IT高科技私营企业。</p>
							</li>
							<li class="pp2 ll">
								<a href="#"><img data-src="images/team-img.png" alt="" width="100%" height="100%"/></a>
								<p class="mis-container-name">姓名</p>
								<p class="mis-container-p">技术总监 </p>
								<p class="mis-container-ms">在包头市稀土高新技术产业开发区软件园注册成立，公司为IT高科技私营企业。</p>
							</li>
							<li class="pp1 ll">
								<a href="#"><img data-src="images/team-img.png" alt="" width="100%" height="100%"/></a>
								<p class="mis-container-name">姓名</p>
								<p class="mis-container-p">技术总监 </p>
								<p class="mis-container-ms">在包头市稀土高新技术产业开发区软件园注册成立，公司为IT高科技私营企业。</p>
							</li>
						</ul>
					</div>
					
					<a href="javascript:;" class="prev btn"></a>
					<a href="javascript:;" class="next btn"></a>
				</div>
			</div>
			<!--团 队 end-->
		</div>
		<strong>[ 技术派  ]</strong>
		<h3>我说，业界没有最好的技术，只有最棒的技术开发者定制研发，为您的客户和团队</h3>
		<!--<p class="p8">邮箱6.0版带来“飞”一般的访问体验，速度提升达30%。采用全新base基础库bjs，更加轻量级，性能更加优化，完全兼容国内用户使用的所有浏览器，以及基于"多核"多线程的核心js引擎，性能和访问速度大幅提升。</p>-->
	</div>
	
	<div class="section section5">
		<div class="bg"><img data-src="images/section5.jpg" alt=""></div>
		<div class="jyTable">
			<div class="clearfix bg102">
				<ul class="title title1 left">
					<li class="gy-tab cur">关于</li>
					<li class="gy-tab">理念</li>
					<li class="gy-tab">荣誉</li>
				</ul>
				<i class="gy-tab-bg"></i>
			</div>
			<div class="zong go">
				<div class="zong-list list1">
					<!--1-->
					<div class="tabCon">
						<div class="gy-title">始于 2004 - 2017 展望未来</div>
						<p class="gy-cont-p">
							内蒙古豪德天沐科技有限公司于2004年3月，在包头市稀土高新技术产业开发区软件园注册成立，公司为IT高科技私营企业。
							 自公司成立之初，就确定了公司面向交通的主要业务方向，几年来，在内蒙古地区承担了多项交通信息化建设项目，帮助政府和企业提升管理水平，
							 加快信息化建设进程。 公司成立十数年以来，取得了累累硕果，在交通、驾培行业，更是成为了本区域的领航者，荣获软交会“互联网+优秀解决方案奖”
							 、“高德地图认证开发商”、“BSIA优秀软件企业”等殊荣，并成功在内蒙古股权交易中心挂牌！ 豪德天沐坚持以市场为导向，以客户为中心，
							以创新为动力，以质量求生存，以发展求壮大，用豪德天沐的精神，继续为社会为行业贡献自己的力量！
						</p>
						<p class="gy-cont-p">
							公司成立十数年以来，取得了累累硕果，在交通、驾培行业，更是成为了本区域的领航者，荣获软交会“互联网+优秀解决方案奖”、
							“高德地图认证开发商”、“BSIA优秀软件企业”等殊荣，并成功在内蒙古股权交易中心挂牌！
						</p>
					</div>
					<!--2-->
					<div class="tabCon">
						<div class="sx-cont">
							<div class="gy-title"><!--<img src="images/linian-bg.png">-->追求卓越，用户至上</div>
							<p class="gy-cont-p">
								登上峰顶，不是为了饱览风光，是为了寻找更高的山峰,<br />
								告别了昨天的荣耀，将光芒照向更远的地方
								一路上，我们更在意如何积累和沉淀
							</p>
							<p class="sx-bottom">下一秒，让你看，我们到底有多强</p>
						</div>
					</div>
					<!--3-->
					<div class="tabCon">
						<div class="sx-cont">
							<div class="gy-title">放下荣誉，继续前进</div>
							<ul style="margin-top: 20px; float: left;">
								<li class="ry-item"><i class="ry-icon"></i>2009年 <u class="ry-fg">-</u>荣获海淀区创新企业</li>
								<li class="ry-item"><i class="ry-icon"></i>2009年 <u class="ry-fg">-</u>荣获海淀区创新企业</li>
								<li class="ry-item"><i class="ry-icon"></i>2009年 <u class="ry-fg">-</u>荣获海淀区创新企业</li>
								<li class="ry-item"><i class="ry-icon"></i>2009年 <u class="ry-fg">-</u>荣获海淀区创新企业</li>
								<li class="ry-item"><i class="ry-icon"></i>2009年 <u class="ry-fg">-</u>荣获海淀区创新企业</li>
								<li class="ry-item"><i class="ry-icon"></i>2009年 <u class="ry-fg">-</u>荣获海淀区创新企业</li>
								<li class="ry-item"><i class="ry-icon"></i>2009年 <u class="ry-fg">-</u>荣获海淀区创新企业</li>
							</ul>
						</div>
					</div>
					<!--3 end-->
				</div>
			</div>
		</div>
		
	</div>
	
	<div class="section section6">
		<div class="bg"><img data-src="images/wp8.jpg" alt=""></div>
		<div class="bg42 bg07">
			<div class="service">
			  <div class="service-list">
			    <ul class="clearfix" id="J_service_container">
			      <li> <a>
			        <div class="item-box">
			        <div>豪德天沐（包头）科技有限公司</div>
			        <div>地址：内蒙古包头市富强路正翔国际汇金中心B8 806</div>
			        <div>电话：0472-5350606 5350616</div>
			        <div class="overlay-bottom"></div>
			        <div class="overlay-left"></div>
			        <div class="overlay-top"></div>
			        <div class="overlay-right"></div>
			        <div class="start-point"> <i class="circle"></i> </div>
			      </div>
			        <div class="service-icon">
			        <div class="circle"><img src="images/call.png" width="70%"></div>
			      </div>
			        </a> </li>
			      <li> <a>
			        <div class="item-box">
			        <div>豪德天沐（深圳）科技有限公司</div>
			        <div>地址：深圳市龙岗区坂田街道贝尔路坂田高新技术工业园一号楼126</div>
			        <div>电话：0472-5350606 5350616</div>
			        <div class="overlay-bottom"></div>
			        <div class="overlay-left"></div>
			        <div class="overlay-top"></div>
			        <div class="overlay-right"></div>
			        <div class="start-point"> <i class="circle"></i> </div>
			      </div>
			        <div class="service-icon">
			        <div class="circle"><img src="images/call.png" width="70%"></div>
			      </div>
			        </a> </li>
			      <li> <a>
			        <div class="item-box">
			        <div>豪德天沐（乌海）科技有限公司</div>
			        <div>地址：内蒙古包头市富强路正翔国际汇金中心B8 806</div>
			        <div>电话：0472-5350606 5350616</div>
			        <div class="overlay-bottom"></div>
			        <div class="overlay-left"></div>
			        <div class="overlay-top"></div>
			        <div class="overlay-right"></div>
			        <div class="start-point"> <i class="circle"></i> </div>
			      </div>
			        <div class="service-icon">
			        <div class="circle"><img src="images/call.png" width="70%"></div>
			      </div>
			        </a> </li>
			      <li> <a>
			        <div class="item-box">
			         <div>豪德天沐 (呼和浩特) 办事处</div>
			        <div>地址：内蒙古呼和浩特市新城区呼伦贝尔北路交通培训中心</div>
			        <div>电话：0471-6534017</div>
			        <div class="overlay-bottom"></div>
			        <div class="overlay-left"></div>
			        <div class="overlay-top"></div>
			        <div class="overlay-right"></div>
			        <div class="start-point"> <i class="circle"></i> </div>
			      </div>
			        <div class="service-icon">
			        <div class="circle"><img src="images/call.png" width="70%"></div>
			      </div>
			        </a> </li>
			    </ul>
			  </div>
			</div>
		</div>
		<strong>[ 我在这里，你在哪里 ]</strong>
		<h3>期待与你共创未来</h3>
	</div>
</div>
</body>
<script src="js/swiper.min.js"></script>
<script src="js/swiper.animate1.0.2.min.js"></script>
<script src="js/mislider.min.js"></script>
<script src="js/tab.js"></script><!--关于页面 tabj.s-->
<script src="js/My_animate.js"></script>
<script>
    //swiper animate
    var mySwiper = new Swiper ('.swiper-container-index', {
      autoplay: 5000,//可选选项，自动滑动
      speed: 1000,
      loop: true,
      pagination: '.swiper-pagination-index',
      paginationClickable: true,
	  onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
	    swiperAnimateCache(swiper); //隐藏动画元素 
	    swiperAnimate(swiper); //初始化完成开始动画
	  }, 
	  onSlideChangeEnd: function(swiper){ 
	    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
	  } 
	})      
	//切套swiper 配置 产品页
	var swiperV = new Swiper('.swiper-container-v', {
        pagination: '.swiper-pagination-v',
        paginationClickable: true,
        slidesPerView: 3,			  //设置slider容器能够同时显示的slides数量(carousel模式)。
        slidesPerColumnFill: 'column',//多行布局中以什么形式填充：。
        slidesPerColumn: 1,			  //多行布局里面每列的slide数量。
        slidesPerGroup: 3,			  //在carousel mode下定义slides的数量多少为一组。
        paginationClickable: true,	  //
        spaceBetween: 30			  //slide之间的距离（单位px）。
    });
    //about swiper
    var swiper = new Swiper('.about-swiper-container', {
        pagination: '.about-swiper-pagination',
        paginationClickable: true,
    });
</script>
<script type="text/javascript">
		$(".gy-tab").hover(function() {
			$(".gy-tab-bg").css('top', $(this).offset().top);
		}, function() {
			$(".gy-tab-bg").css('top', $(this).offset().top);
		});
/* 方案*/
$(".serBox").hover(function () {
	 $(this).children().stop(false,true);
	 $(this).children(".serBoxOn").fadeIn("slow");
     $(this).children(".pic1").animate({right: -170},400);
     $(this).children(".pic2").animate({left: 80},400);
     $(this).children(".txt1").animate({left: -270},400);
     $(this).children(".txt2").animate({right: 0},400);	
},function () {
	 $(this).children().stop(false,true);
	 $(this).children(".serBoxOn").fadeOut("slow");
	 $(this).children(".pic1").animate({right:90},400);
     $(this).children(".pic2").animate({left: -170},400);
     $(this).children(".txt1").animate({left: 0},400);
     $(this).children(".txt2").animate({right: -270},400);	
});
</script>
<script type="text/javascript">
var cArr=["pp7","pp6","pp5","pp4","pp3","pp2","pp1"];
var index=0;
$(".next").click(
	function(){
	nextimg();
	}
)
$(".prev").click(
	function(){
	previmg();
	}
)
//上一张
function previmg(){
	cArr.unshift(cArr[6]);
	cArr.pop();
	//i是元素的索引，从0开始
	//e为当前处理的元素
	//each循环，当前处理的元素移除所有的class，然后添加数组索引i的class
	$(".list li").each(function(i,e){
		$(e).removeClass().addClass(cArr[i]);
	})
	index--;
	if (index<0) {
		index=6;
	}
	show();
}

//下一张
function nextimg(){
	cArr.push(cArr[0]);
	cArr.shift();
	$(".list li").each(function(i,e){
		$(e).removeClass().addClass(cArr[i]);
	})
	index++;
	if (index>6) {
		index=0;
	}
	show();
}


//点击class为p2的元素触发上一张照片的函数
$(document).on("click",".pp2,.pp3",function(){
	previmg();
	return false;//返回一个false值，让a标签不跳转
});

//点击class为p4的元素触发下一张照片的函数
$(document).on("click",".pp5,.pp6",function(){
	nextimg();
	return false;
});
</script>
<script type="text/javascript">
    function func1(){
		//loading
		$(".page").hide();
	}
    window.onload=function(){
        func1();
    }
</script>
</html>